<template>
    <h1>发送方</h1>
    <el-row :gutter="20">
        <el-col :span="3">
            <el-select v-model="valueId" clearable placeholder="请选择">
                <el-option
                  v-for="item in dataId"
                  :key="item[0]"
                  :label="item[0]"
                  :value="item[0]">
                </el-option>
              </el-select>
        </el-col>
        <el-col :span="3">
            <div class="block">
                <el-date-picker style="width: 200px;"
                  v-model="value1"
                  @blur="daterangeSj"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>
        </el-col>
        <el-col :span="2">
            <el-button @click="handleChange()">查询</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <div id="echart-line" :style="{width: '600px', height: '250px'}"></div> 
        </el-col>
        <el-col :span="12">
            <div id="echart-line2" :style="{width: '600px', height: '250px'}"></div> 
        </el-col>
      </el-row>
</template>


<script>
    export default {
    data() {
        return {
            name:'发送方',
            //流量
            xDatall: [],
            yDatall: [],
            //速率
            xDatasl: [],
            yDatasl: [],
            dataId: [],
            valueId:'',
            value1: '',
            start_time:'',
            end_time:''
        };
    },
    methods: {
        daterangeSj(){
            var starttime = (this.value1[0]).valueOf(); // 通过valueOf()函数返回指定对象的原始值获得准确的时间戳值
             var endtime = (this.value1[1]).valueOf();
             //精确到秒
             this.start_time = starttime.toString().substr(0,10);
             this.end_time = endtime.toString().substr(0,10);
        },
        handleChange(){
            this.start_time = Date.parse(new Date(new Date().setHours(0, 0, 0, 0))).toString().substr(0,10),
            this.end_time = Date.parse(new Date(new Date().setHours(23, 59, 59, 59))).toString().substr(0,10),

            this.showTable(this.valueId,this.start_time,this.end_time)
        },
        addini(){
            var id = []
            var ll = []
            this.axios({url:"http://192.168.90.74:5000/get_traffic?flag=1"}).then((res)=>{
                res.data.data.forEach(function(item,index,data){
                    id.push(data[index][0])
                    ll.push(data[index][1])
                })
                console.log(id,ll)
                this.xDatall = id
                 //流量
                 ll.forEach(function(item,index,data){
                    var flow = data[index]
                    ll[index] = (flow / (1024 * 1024)).toFixed(2)
                 })
                this.yDatall = ll
                this.initChart2('流量',this.xDatall,this.yDatall)
			}).catch(()=>{})

        },
        addiniD(){
            this.axios({url:"http://192.168.90.74:5000/get_newIds?flag=1"}).then((res)=>{
                   this.dataId = res.data.data
                   this.valueId = res.data.data[0]

                   this.showTable(this.valueId,Date.parse(new Date(new Date().setHours(0, 0, 0, 0))).toString().substr(0,10),Date.parse(new Date(new Date().setHours(23, 59, 59, 59))).toString().substr(0,10))
			}).catch(()=>{})
        },
        //
        showTable(valueId,starttime,endtime){
            var speed = []
            var dateTm = []
            //发送方
            this.axios({url:"http://192.168.90.74:5000/get_speed?id=" +valueId+ "&flag=1"+"&start_time="+ starttime +"&end_time="+endtime}).then((res1)=>{
                console.log(res1,"发送方")
                if(res1.data.code != 500){
                    res1.data.data.forEach(function(item,index,data){
                        speed.push(parseFloat(data[index][2] / 1024).toFixed(2))
                        dateTm.push(data[index][1])
                    })
                }
                this.initChart('速率',dateTm,speed)      
            }).catch(()=>{})
        },
        initChart(name,xData,yData) {
            console.log(xData,yData)
                let getchart = this.$echarts.init(document.getElementById('echart-line'));
                var  option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [name],
                        bottom:'0%'
                    },
                    grid: { //调整图表上下左右位置
                        top:'10%',
                        left: '3%',
                        right: '8%',
                        bottom: '11%',
                        containLabel: true
                        
                    },
                    
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData
                    },
                    yAxis: {
                        type: 'value',
                        min:0,
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#CCCCCC",
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value} mbps'
                        }
                    },
                    series: [
                        {
                            name: name,
                            type: 'line',
                            stack: '总量',
                            data: yData
                        },
                    ]
                };

                getchart.setOption(option);
                //随着屏幕大小调节图表
                    window.addEventListener("resize", () => {
                        getchart.resize();
                    });
                },
                initChart2(name,xData,yData) {
                let getchart2 = this.$echarts.init(document.getElementById('echart-line2'));
                var  option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [name],
                        bottom:'0%'
                    },
                    grid: { //调整图表上下左右位置
                        top:'10%',
                        left: '3%',
                        right: '8%',
                        bottom: '11%',
                        containLabel: true
                    },
                    
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xData,
                    },
                    yAxis: {
                        type: 'value',
                        min:0,
                        axisLine: {
                            show: true
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#CCCCCC",
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value} MB'
                        }
                    },
                    series: [
                        {
                            name: name,
                            type: 'bar',
                            stack: '总量',
                            data: yData,
                            barWidth : 10, //柱图宽度
                        },
                    ]
                };

                getchart2.setOption(option);
                //随着屏幕大小调节图表
                    window.addEventListener("resize", () => {
                        getchart2.resize();
                    });
                },
    },
    mounted(){
       this.addini()
       this.addiniD()

    }
    };
</script>
  